<template>
    <div class="system-role-container-result-index">

        <el-card shadow="hover" class="mb10  ">
            <div class="system-user-search-result-index">
                <div>
                    <el-form :model="param" label-width="150px">

                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="学号：">
                                <el-input size="small" placeholder="请输入学号" v-model="param.xxzh"
                                          style="width: 215px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="姓名：">
                                <el-input size="small" placeholder="请输入姓名" v-model="param.xm"
                                          style="width: 215px" class="ml10">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="身份证号：">
                                <el-input size="small" placeholder="请输入身份证号" v-model="param.sfzh"
                                          style="width: 215px" class="ml10">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="院校代码：">
                                <el-input size="small" placeholder="请输入院校代码" v-model="param.yxdm"
                                          style="width: 215px" class="ml10">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">

                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">

                        </el-col>



                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="学历层次：">
                                <el-select v-model="param.xlcc" placeholder="请选择学历层次" size="small" style="width: 215px" >
                                    <el-option label="研究生" value="1"></el-option>
                                    <el-option label="普通本科" value="2"></el-option>
                                    <el-option label="普通专科" value="3"></el-option>
                                    <el-option label="成人本科" value="4"></el-option>
                                    <el-option label="成人专科" value="5"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="院校类别：">
                                <el-select v-model="param.szyx" placeholder="请选择学历层次" size="small"
                                           style="width: 215px"   class="ml10">
                                    <el-option label="科研单位" value="1"></el-option>
                                    <el-option label="普通高校" value="2"></el-option>
                                    <el-option label="成人高校" value="3"></el-option>
                                    <el-option label="电视大学" value="4"></el-option>
                                    <el-option label="网络教育" value="5"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </div>
                <div style="display: flex;justify-content: end;">
                    <el-button class="ml10" @click="searchClear">重置 </el-button>
                    <el-button class="ml10 btn_bgc" type="primary" @click="search"> 查询</el-button>
                    <el-button class="ml10" @click="searchClear">重置 </el-button>

                </div>
            </div>
        </el-card>
        <el-card shadow="hover">
          <template #header>
            <div style="display: flex; justify-content: end">
              <el-button style="margin: 10px 0; transform: translateX(2px);"
                         size="small" type="success" class="ml10" @click="onOpenEditRole">
                <el-icon>
                  <elementFolderAdd />
                </el-icon>
                比对结果报送
              </el-button>
            </div>

          </template>
          <el-table
              :data="tableData.data"
              align="center"
              style="width: 100%"
              height="calc(100vh - 180px )"
              :header-cell-style="{ background: '#EEEEEE', }">
            <!--                <el-table-column prop="kscode" label="考生号" width="180"></el-table-column>-->
            <el-table-column prop="xxzh" label="学号" width="180" align="center"></el-table-column>
            <el-table-column prop="xm" label="姓名" width="80" align="center"></el-table-column>
            <!--                <el-table-column prop="studentid" label="学生编号" width="180"></el-table-column>-->
            <!--                <el-table-column prop="xb" label="性别" width="180">-->
            <!--                    <template #default="scope">-->
            <!--                        <span type="success" v-if="scope.row.xb===1">男</span>-->
            <!--                        <span type="success" v-if="scope.row.xb===2">女</span>-->
            <!--                    </template>-->
            <!--                </el-table-column>-->
            <el-table-column prop="yxdm" label="学院代码" width="100" align="center"></el-table-column>
            <el-table-column prop="schoolname" label="学校名称" width="180" align="center"></el-table-column>
            <!--                <el-table-column prop="classes" label="班级" width="180"></el-table-column>-->
            <el-table-column prop="sfzh" label="身份证号" width="180" align="center"></el-table-column>
            <el-table-column prop="xlcc" label="学历层次" width="100" align="center">
              <template #default="scope">
                <span type="success" v-if="scope.row.xlcc===1">研究生</span>
                <span type="success" v-if="scope.row.xlcc===2">普通本科</span>
                <span type="success" v-if="scope.row.xlcc===3">普通专科</span>
                <span type="success" v-if="scope.row.xlcc===4">成人本科</span>
                <span type="success" v-if="scope.row.xlcc===5">成人专科</span>
              </template>
            </el-table-column>
             <el-table-column prop="zy" label="专业" width="180" align="center"></el-table-column>
            <el-table-column prop="szyx" label="院校类别" width="100" align="center">
              <template #default="scope">
                <span type="success" v-if="scope.row.szyx===1">科研单位</span>
                <span type="success" v-if="scope.row.szyx===2">普通高校</span>
                <span type="success" v-if="scope.row.szyx===3">成人高校</span>
                <span type="success" v-if="scope.row.szyx===4">电视大学</span>
                <span type="success" v-if="scope.row.szyx===5">网络教育</span>
              </template>
            </el-table-column>
            <!--                <el-table-column prop="year" label="拍摄所在届" width="180" align="center"></el-table-column>-->
            <!--                <el-table-column prop="dqm" label="拍摄地区" width="180" align="center"></el-table-column>-->
            <el-table-column prop="zpbdjg" label="照片比对结果" width="160" align="center"></el-table-column>
            <el-table-column prop="zpxzcs" align="center" label="照片下载次数" width="120"></el-table-column>
            <el-table-column prop="code" label="操作"  align="center">
              <template #default="scope" >
                  <el-button v-if="scope.row.infopath" size="mini" type="success" @click="lookPic(scope.row)">查看照片</el-button>
                <el-button size="mini" type="success" @click="lookDatail(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                           :pager-count="5" :page-sizes="[15, 35, 45]" v-model:current-page="param.current" background
                           v-model:page-size="param.size" layout="total, sizes, prev, pager, next, jumper"
                           :total="tableData.total">
            </el-pagination>
        </el-card>
        <AddRole ref="addRoleRef"/>
        <EditRole ref="editRoleRef" />
        <LookDatile ref="lookRoleRef" />
        <!-- 表格弹出照片 -->
        <el-dialog title  v-model="imgViewDialogVisible" class="imgView-dialog" >
            <div class="main" style="text-align: center">
                <el-image :src="imgViewDialog_imgSrc" :width="boxWidth" style="width: 50%; height: 50%;"></el-image>
                <!--                <img class="img" width="100%" :src="imgViewDialog_imgSrc" />-->
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { toRefs, reactive, onMounted, ref } from 'vue';
    import { ElMessageBox, ElMessage } from 'element-plus';
    import AddRole from './component/addRole.vue';
    import EditRole from './component/editRole.vue';
    import LookDatile from "./component/lookDatile.vue";
    import {xuejiGet,getImageUrl} from  '../../api/result/index'
    export default {
        name: 'studentIndex',
        components: { AddRole, EditRole ,LookDatile},
        setup() {
            const addRoleRef = ref();
            const editRoleRef = ref();
            const lookRoleRef = ref();
            const state: any = reactive({
                tableData: {
                    data: [],
                    total: 0,
                    loading: false,
                },
                param: {
                    yxdm: '',//院校代码
                    xlcc: '',//学历层次
                    xxxs: '',//学院类别
                    xxzh: '',//学号
                    xm: '',//姓名
                    sfzh: '',//身份证号
                    szyx:'',
                    current:1,
                    size:15
                },
                pageSize:'',
                pageNum:'',
                imgViewDialogVisible:false,   //控制照片大图
                imgViewDialog_imgSrc:'',
            });
            // 初始化表格数据
            const initTableData = async() => {
                const res=await xuejiGet(state.param)
                state.tableData.data = res.data.records;
                state.tableData.total = res.data.total;
            };
            // 打开批量上传弹窗
            const onOpenAddRole = () => {
                addRoleRef.value.openDialog();
            };
            // 打开比对结果弹窗
            const onOpenEditRole = (row: Object) => {
                editRoleRef.value.openDialog(row);
            };
            //弹出弹出框照片
            const lookPic =(row:any)=>{
                state.imgViewDialogVisible = true
                // state.imgViewDialog_imgSrc = row.zp
                const params = {
                    imageUrl:row.infopath
                }
                getImageUrl(params).then((res:any)=>{
                    console.log('=====>',res.data)
                    state.imgViewDialog_imgSrc = res.data
                    // window.open(res.url);
                })
            }
            // 分页改变
            const onHandleSizeChange = (val: number) => {
                state.pageSize = val;
                initTableData()
            };
            // 分页改变
            const onHandleCurrentChange = (val: number) => {
                state.pageNum = val;
                initTableData()
            };
            const lookDatail =(row:any)=>{
                lookRoleRef.value.openDialog(row);
            }
            //查询
            const search=async()=>{
                const res= await xuejiGet(state.param)
                console.log(res)
                state.tableData.data = res.data.records;
                state.tableData.total = res.data.total;
            }
            const searchClear=async()=>{
                state.param={}
                const res=await xuejiGet(state.param)
                state.tableData.data = res.data.records;
                state.tableData.total = res.data.total;
                state.param.size =15
                console.log(res)
            }
            // 页面加载时
            onMounted(() => {
                initTableData();
            });
            return {
                addRoleRef,
                editRoleRef,
                lookRoleRef,
                lookPic,
                lookDatail,
                onOpenAddRole,
                onOpenEditRole,
                onHandleSizeChange,
                onHandleCurrentChange,
                search,
                searchClear,
                ...toRefs(state),
            };
        },
    };
</script>

<style lang="scss">
.system-role-container-result-index {
  .el-card__header {
    height: auto!important;
    min-height: 45px!important;
  }
}
    .system-user-search-result-index {
        display: flex;
        flex-direction: column;
        .btn_bgc {
            background: #D84436;
            border: none;

        }

    }

    .system-more {
        display: flex;
        flex-direction: row;
        justify-content: end;
    }
</style>
